<template>
  <div>
    <el-tag type="info" effect="light" round @click="search"> {{ title }} </el-tag>
    <MkDialog title="患者历史输血信息" v-model="dialogVisible" width="70%" buttons="close">
      <MkTable :data="tableData" :fit="true" v-loading="ctx.loading" max-height="400">
        <MkColumnIndex />
        <MkColumn prop="yongXueId" label="申请单号" />
        <MkColumn prop="yongXueLeiXing" label="用血类型" :col="0.8" />
        <el-table-column label="患者信息" min-width="500px">
          <template #default="{ row }">
            <MkPatient :model-value="row" style="padding: 0;" />
          </template>
        </el-table-column>
        <MkColumn prop="pinZhongMingCheng" label="申请品种" :col="1.2" />
        <el-table-column label="申请量" min-width="72px">
          <template #default="{ row }">
            {{ row.shenQingLiang }}{{ row.danWei }}
          </template>
        </el-table-column>
        <MkColumn prop="shenQingABO" label="申请ABO" :col="0.6" />
        <MkColumn prop="shenQingRhD" label="申请RhD" :col="0.6" />
        <MkColumn prop="faXueId" label="发血单号" />
        <MkColumn prop="faXueHuiZong" label="发血汇总" :col="1.8" />
        <el-table-column label="发血量" min-width="72px">
          <template #default="{ row }">
            {{ row.shenQingLiang }}{{ row.danWei }}
          </template>
        </el-table-column>
        <MkColumn prop="createTime" label="发血时间" />
      </MkTable>
      <MkPagination v-model:page="ctx.page" v-model:pageSize="ctx.pageSize" :total="ctx.total" @query="search" />

    </MkDialog>
  </div>
</template>

<script lang='ts' setup>
import { HuanZheLiShiFaXueOutput, TraShenQingApi } from '/@/api/tra/TraShenQing';
import { isNull } from '/@/utils';

const props = defineProps({
  title: { type: String, default: '历史输血' },
  huanZheId: { type: String },
  zhuYuanHao: { type: String }
});

const dialogVisible = ref(false);
const tableData = ref<HuanZheLiShiFaXueOutput[]>([]);
const ctx = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  loading: false
})
/** 检索 */
const search = async () => {
  if (isNull(props.huanZheId) && isNull(props.zhuYuanHao)) {
    tableData.value = []
    dialogVisible.value = true
    return
  }
  ctx.loading = true
  TraShenQingApi.checkLiShiShuXuePage({
    huanZheId: props.huanZheId,
    zhuYuanHao: props.zhuYuanHao,
    page: ctx.page,
    pageSize: ctx.pageSize
  }).then(res => {
    tableData.value = res.items
    ctx.total = res.total
    dialogVisible.value = true;
  }).finally(() => {
    ctx.loading = false
  })
};

</script>